<template>
  <div class="com">
    <div class="port-item" v-for="item in portList" :key="item.id">
      <el-image style="width: 134px; height: 40px;" :src="item.logo" fit="fill"></el-image>
      <el-button type="primary" round size="mini" @click="handleAddPort(item)">添加端口</el-button>
    </div>
  </div>
</template>

<script>
import { PORT_CODE_AJK, PORT_CODE_XFL_MP, PORT_NAME_AJK, PORT_NAME_XFL_MP, PORT_CODE_XFL_STORE, PORT_NAME_XFL_STORE } from '@/config/house/platform';
export default {
  name: 'PortManagementSelect',

  components: {},

  props: {},

  data() {
    return {
      portList: [
        {
          id: PORT_CODE_AJK,
          name: PORT_NAME_AJK,
          logo: require('@/assets/images/port_logo_ajk@1x.png'),
        },
        {
          id: PORT_CODE_XFL_MP,
          name: PORT_NAME_XFL_MP,
          logo: require('@/assets/images/port_logo_xfl_mp@1x.png'),
        },
        {
          id: PORT_CODE_XFL_STORE,
          name: PORT_NAME_XFL_STORE,
          logo: require('@/assets/images/port_logo_xfl_store@1x.png'),
        },
      ],
    };
  },

  computed: {},

  watch: {},

  created() {},

  beforeMount() {},

  mounted() {},

  methods: {
    // ------------------handle------------------
    // 添加端口
    handleAddPort(e) {
      this.$emit('addPort', { code: e.id, name: e.name });
    },
  },
};
</script>
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.com {
  height: 400px;
  overflow-y: auto;
  @include scrollBar;
}
.port-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 24px 0;
  padding: 0 32px;
  height: 80px;
  background: #f8fbff;
  &:first-child {
    margin-top: 0;
  }
}
</style>
